<!DOCTYPE html>
<html>
<head>
    <title>Gravitational Lensing Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="lensingCanvas" width="900" height="600"></canvas>
    <script>
        const canvas = document.getElementById('lensingCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        
        // Coordinates
        const O = { x: 100, y: 400 };
        const P_proj1 = { x: 400, y: 400 }; // Projection of Q1 onto the axis
        const Q1 = { x: 400, y: 340 };
        const Q2 = { x: 800, y: 220 };
        const P_proj2 = { x: 800, y: 400 }; // Projection of Q2 onto the axis

        // --- Draw Lines ---

        // Solid lines
        ctx.beginPath();
        // Line from O to P_proj1
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(P_proj1.x, P_proj1.y);
        // Line from O to Q1
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(Q1.x, Q1.y);
        // Line from Q1 to Q2
        ctx.moveTo(Q1.x, Q1.y);
        ctx.lineTo(Q2.x, Q2.y);
        // Vertical line 'r'
        ctx.moveTo(Q1.x, Q1.y);
        ctx.lineTo(P_proj1.x, P_proj1.y);
        ctx.stroke();

        // Dashed lines
        ctx.beginPath();
        ctx.setLineDash([8, 8]);
        // Horizontal axis from P_proj1 to P_proj2
        ctx.moveTo(P_proj1.x, P_proj1.y);
        ctx.lineTo(P_proj2.x, P_proj2.y);
        // Horizontal dashed line from Q1
        ctx.moveTo(Q1.x, Q1.y);
        ctx.lineTo(Q1.x + 200, Q1.y);
        // Dashed construction lines for Q2
        ctx.moveTo(Q2.x, Q2.y);
        ctx.lineTo(P_proj2.x, P_proj2.y);
        ctx.moveTo(P_proj1.x, P_proj2.y);
        ctx.lineTo(P_proj2.x, P_proj2.y);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid lines

        // --- Draw Angles ---

        // Angle theta at O
        ctx.beginPath();
        const angleTheta = Math.atan2(O.y - Q1.y, Q1.x - O.x);
        ctx.arc(O.x, O.y, 80, -angleTheta, 0);
        ctx.stroke();

        // Angle phi at Q1
        ctx.beginPath();
        const angleOQ1 = Math.atan2(O.y - Q1.y, O.x - Q1.x); // Angle of the line O-Q1
        ctx.arc(Q1.x, Q1.y, 60, Math.PI, angleOQ1);
        ctx.stroke();

        // --- Draw Labels ---

        // Set font for variables and points
        ctx.font = 'italic 28px serif';
        
        // Point labels
        ctx.fillText('O', O.x - 30, O.y + 10);
        ctx.fillText('Q', Q1.x + 5, Q1.y - 15);
        ctx.font = 'italic 20px serif';
        ctx.fillText('1', Q1.x + 22, Q1.y - 10);
        
        ctx.font = 'italic 28px serif';
        ctx.fillText('Q', Q2.x + 10, Q2.y - 15);
        ctx.font = 'italic 20px serif';
        ctx.fillText('2', Q2.x + 27, Q2.y - 10);
        
        // Variable labels
        ctx.font = 'italic 28px serif';
        ctx.fillText('r', Q1.x + 10, Q1.y + 40);
        
        // rho_1
        ctx.fillText('\u03C1', (O.x + P_proj1.x) / 2 - 15, P_proj1.y + 40);
        ctx.font = 'italic 20px serif';
        ctx.fillText('1', (O.x + P_proj1.x) / 2 + 2, P_proj1.y + 45);
        
        // rho_2
        ctx.font = 'italic 28px serif';
        ctx.fillText('\u03C1', (Q1.x + Q2.x) / 2, (Q1.y + Q2.y) / 2 - 15);
        ctx.font = 'italic 20px serif';
        ctx.fillText('2', (Q1.x + Q2.x) / 2 + 17, (Q1.y + Q2.y) / 2 - 10);

        // Angle labels
        ctx.font = 'italic 26px serif';
        ctx.fillText('\u03B8', O.x + 90, O.y - 10); // theta
        ctx.fillText('\u03C6', Q1.x + 70, Q1.y + 25); // phi
        
        // Figure caption
        ctx.font = 'bold 24px serif';
        ctx.fillText('Fig. 2.6', canvas.width / 2 - 50, 550);

    </script>
</body>
</html>